<!--
 * @Author: 白印潇 bai_yinxiao@163.com
 * @Date: 2023-03-08 15:38:27
 * @LastEditors: 白印潇 bai_yinxiao@163.com
 * @LastEditTime: 2023-03-24 15:30:45
 * @FilePath: /shortRent-ui/src/views/risk/illegal/account.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="app-container">

    <div class="custom_card_0">
      <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px" size="small">
        <el-form-item label="账号" prop="account">
          <el-input v-model="queryParams.account" placeholder="请输入账号" clearable @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item label="所属平台" prop="platform">
          <el-select v-model="queryParams.platform" placeholder="请选择" clearable>
            <el-option label="12123平台" :value="1" />
            <el-option label="深圳交警" :value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="enableFlag">
          <el-select v-model="queryParams.enableFlag" placeholder="请选择" clearable>
            <el-option label="启用" :value="1" />
            <el-option label="禁用" :value="0" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button class="first-plain-btn" size="medium" @click="handleAdd">新增账号</el-button>
      </el-col>
    </el-row>
    <div class="custom_card_0">
      <el-table v-loading="loading" :data="basicList" stripe
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }" border>
        <template slot="empty">
          <el-empty :image-size="50" description="暂无账号"></el-empty>
        </template>
        <el-table-column type="index" label="序号" align="center">
        </el-table-column>
        <el-table-column label="账号" align="center" prop="account" />
        <el-table-column label="密码" align="center" prop="password" />
        <el-table-column label="地区" align="center">
          <template v-slot="{ row }">
            {{ row.addrName | filterNull }}
          </template>
        </el-table-column>
        <el-table-column label="所属平台" align="center">
          <template v-slot="{ row }">
            {{ row.platform | platform }}
          </template>
        </el-table-column>
        <el-table-column label="关联车辆所属公司" align="center">
          <template v-slot="{ row }">
            {{ configOrg(row) }}
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center">
          <template v-slot="{ row }">
            <el-tag v-if="row.enableFlag == 1" type="success">启用</el-tag>
            <el-tag v-else type="danger">禁用</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200">
          <template v-slot="{ row }">
            <!-- 启用状态: 禁用 -->
            <template v-if="row.enableFlag == 1">
              <el-button size="small" type="text" @click="handleClose(row)">禁用</el-button>
            </template>
            <!-- 禁用状态: 启用|编辑|删除 -->
            <template v-else>
              <el-button size="small" type="text" @click="handleOpen(row)">启用</el-button>
              <el-button size="small" type="text" @click="handleEdit(row)">编辑</el-button>
              <el-button size="small" type="text" @click="handleDelete(row)">删除</el-button>
            </template>
            <!-- 公共按钮 -->
<!--            <el-button size="small" type="text" @click="handleCorrelationCompany(row)">关联公司</el-button>-->
          </template>
        </el-table-column>
      </el-table>

      <div v-show="total > 0" style="background-color: #fff;padding-bottom: 10px; margin-top: 10px;">
        <pagination :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
          @pagination="getList" />
      </div>
    </div>

    <!-- 新增账号 -->
    <add-account ref="addAccount" @success="refrehList"></add-account>
    <!-- 关联公司 -->
    <CorrelationOrg ref="correlationOrg" @success="refrehList"></CorrelationOrg>

  </div>
</template>

<script>
import AddAccount from './components/addAccount.vue';
import CorrelationOrg from './components/correlationOrg.vue';
import * as illegalApi from '@/api/car/illegal';
export default {
  name: 'Account',
  components: {
    AddAccount,
    CorrelationOrg

  },
  data() {
    return {
      // 加载标识
      loading: false,
      // 总条数
      total: 0,
      // 征信工单数据
      basicList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        account: '',//账号
        platform: '', //平台类型
        enableFlag: ''//状态
      }
    }
  },
  created() {
    this.getList()
  },
  activated() {
    this.getList()
  },
  methods: {
    // 搜索
    handleQuery() {
      this.refrehList();
    },
    // 重置
    resetQuery() {
      this.$refs.queryForm.resetFields();
      this.refrehList();
    },
    // 刷新工单列表
    refrehList() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 查询账号列表 */
    getList() {
      this.loading = true
      illegalApi.illegalAccountList(this.queryParams).then(res => {
        this.basicList = res.rows;
        this.total = res.total;
        this.loading = false;
      }).catch(() => {
        this.loading = false
      })
    },
    //配置违章账号关联公司
    configOrg(row) {
      let argNameList = [];
      if (row.orgList.length > 0) {
        row.orgList.forEach((item) => {
          argNameList.push(item.name);
        })
      }
      return argNameList.join(',');
    },
    // 新增账号
    handleAdd() {
      this.$refs.addAccount.show(0);
    },
    // 编辑账号
    handleEdit(item) {
      this.$refs.addAccount.show(1, item.id);
    },
    // 启用
    handleOpen(item) {
      this.$confirm('确认启用账号?', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消'
      }).then(() => {
        illegalApi.upDateIllegalAcountEnable({
          id: item.id,
          enableFlag: 1
        }).then(() => {
          this.refrehList();
          this.$message({
            type: 'success',
            message: '启用成功'
          })
        })

      })
    },
    // 禁用
    handleClose(item) {
      this.$confirm('确认禁用账号?', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消'
      }).then(() => {
        illegalApi.upDateIllegalAcountEnable({
          id: item.id,
          enableFlag: 0
        }).then(() => {
          this.refrehList();
          this.$message({
            type: 'success',
            message: '禁用成功'
          })
        })
      })
    },
    // 删除
    handleDelete(item) {
      this.$confirm(`'确定删除账户吗?'`, '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        illegalApi.deleteIllegalAcount({
          id: item.id
        }).then(res => {
          if (res.code == 200) {
            this.refrehList();
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }

        })
      })
    },
    // 关联公司
    handleCorrelationCompany(item) {
      this.$refs.correlationOrg.show(item.id);
    }
  },
}
</script>

<style scoped>
.customer_card_1 {
  background-color: #fff;
  padding: 30px;
  margin: 15px 0;
  display: flex;
  flex-direction: row;
  align-items: center;
}

/deep/ .table_header {
  background-color: #7aa1ea !important;
}
</style>
